<!DOCTYPE html>
<meta charset="uft-8">
<html>
<head>
  	<title>测试</title>
  	<style type="text/css">
  		*{
  			margin: 0;
  			padding: 0;
  		}
  		.yiji{
			width: 300px;
			height: 51px;
			margin: 0 auto;
			margin-top: 100px;
			background-color: skyblue;
  		}
  		.yiji>li{
  			list-style: none;
  			width: 100px;
  			border: 1px solid black;
  			box-sizing: border-box;
  			float: left;
  			text-align: center;
  			line-height: 50px;
  			position: relative;
  		}
  		.erji{
  			background-color: pink;
  			width: 100px;
  			position: absolute;
  			z-index: 9999;
  		}
  		.erji>li{
  			list-style: none;
  			margin: 0 auto;
  			display: none;
  		}
  		.yiji>li:hover .erji>li{
  			display: block;
  		}
  		div{
  			width: 300px;
  			height: 300px;
  			background-color: green;
  			margin: 0 auto;
  		}
	</style>
</head>
<body>
  <ul class="yiji">
  	<li>一级菜单
  		<ul class="erji">
  			<li>二级菜单</li>
  			<li>二级菜单</li>
  			<li>二级菜单</li>
  		</ul>
  	</li>
  	<li>一级菜单
  		<ul class="erji">
  			<li>二级菜单</li>
  			<li>二级菜单</li>
  			<li>二级菜单</li>
  		</ul>
  	</li>
  	<li>一级菜单
  		<ul class="erji">
  			<li>二级菜单</li>
  			<li>二级菜单</li>
  			<li>二级菜单</li>
  		</ul>
  	</li>
  </ul>
  <div>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</div>
</body>
</html>